// 事件监听
import React, {Component} from 'react';
export default class EventBind extends React.Component {
  constructor() {
    super()
    this.state = {
      num: '1',
      age: 18
    }
    // this.showData = this.showData.bind(this)
  }
  showData(num, e) {
    // setState是异步的，如果想看正确结果，需要在回调函数中打印
    console.log(e);
    this.setState({
      num: num
    }, ()=> {console.log(this.state.num)})
  }
  // 模拟实现双向绑定
  bothWayBind(e) {
    // 打印输入框中的值
    console.log(e.target.value);
    // 将输入框中的值赋给状态机中的值
    this.setState({
      age: e.target.value
    })
  }
  render() {
    return (<div>
      {/* this指向当前组件 */}
      <button onClick={(e) => this.showData('ES6', e)}>ES6-箭头函数</button>
      {/* 默认this是undefined，需要通过bind(this)绑定 */}
      <button onClick={this.showData.bind(this, 'ES5')}>ES5-普通函数</button>
      {/* <button onClick={this.showData}>ES5-普通函数</button> */}
      <input value={this.state.age} onChange={(e) => {this.bothWayBind(e)}} />
      {/* vue版本的双向绑定<input :value="age" @change="xxxx"> */}
    </div>)
  }
}